

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>消息盒子</title>

<link rel="stylesheet" href="../../../layui.css">
<style>
.layim-msgbox {
	margin: 15px;
}

.layim-msgbox li {
	position: relative;
	margin-bottom: 10px;
	padding: 0 130px 10px 60px;
	padding-bottom: 10px;
	line-height: 22px;
	border-bottom: 1px dotted #e2e2e2;
}

.layim-msgbox .layim-msgbox-tips {
	margin: 0;
	padding: 10px 0;
	border: none;
	text-align: center;
	color: #999;
}

.layim-msgbox .layim-msgbox-system {
	padding: 0 10px 10px 10px;
}

.layim-msgbox li p span {
	padding-left: 5px;
	color: #999;
}

.layim-msgbox li p em {
	font-style: normal;
	color: #FF5722;
}

.layim-msgbox-avatar {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	height: 50px;
}

.layim-msgbox-user {
	padding-top: 5px;
}

.layim-msgbox-content {
	margin-top: 3px;
}

.layim-msgbox .layui-btn-small {
	padding: 0 15px;
	margin-left: 5px;
}

.layim-msgbox-btn {
	position: absolute;
	right: 0;
	top: 12px;
	color: #999;
}
</style>
</head>
<body>

	<ul class="layim-msgbox" id="LAY_view"></ul>

	<div style="margin: 0 15px;">
		<blockquote class="layui-elem-quote">
			注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。 <br>该模版文件所在目录（相对于layui.js）：/css/modules/layim/html/msgbox.html
		</blockquote>
	</div>

	<textarea title="消息模版" id="LAY_tpl" style="display: none;">
{{# layui.each(d.data, function(index, item){
  if(item.from){ }}
    <li data-uid="{{ item.from }}"
			data-fromGroup="{{ item.from_group }}">
      <a href="/u/{{ item.from }}/" target="_blank">
        <img src="{{ item.user.avatar }}"
				class="layui-circle layim-msgbox-avatar">
      </a>
      <p class="layim-msgbox-user">
        <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
        <span>{{ item.time }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{ item.content }} 
        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
        <button class="layui-btn layui-btn-small layui-btn-primary"
					data-type="refuse">拒绝</button>
      </p>
    </li>
  {{# } else { }}
    <li class="layim-msgbox-system">
      <p>
				<em>系统：</em>{{ item.content }}<span>{{ item.time }}</span>
			</p>
    </li>
  {{# }
}); }}
</textarea>

	<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html 
-->


	<script src="../../../../layui.js"></script>
	<script>
layui.use(['layim', 'flow'], function(){
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,flow = layui.flow;

  var cache = {}; //用于临时记录请求到的数据

  //请求消息
  var renderMsg = function(page, callback){
    
    //实际部署时，请将下述 getmsg.json 改为你的接口地址
    
    $.get('getmsg.json', {
      page: page || 1
    }, function(res){
      if(res.code != 0){
        return layer.msg(res.msg);
      }

      //记录来源用户信息
      layui.each(res.data, function(index, item){
        cache[item.from] = item.user;
      });

      callback && callback(res.data, res.pages);
    });
  };

  //消息信息流
  flow.load({
    elem: '#LAY_view' //流加载容器
    ,isAuto: false
    ,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
    ,done: function(page, next){ //加载下一页
      renderMsg(page, function(data, pages){
        var html = laytpl(LAY_tpl.value).render({
          data: data
          ,page: page
        });
        next(html, page < pages);
      });
    }
  });

  //打开页面即把消息标记为已读
  /*
  $.post('/message/read', {
    type: 1
  });
  */

  //操作
  var active = {
    //同意
    agree: function(othis){
      var li = othis.parents('li')
      ,uid = li.data('uid')
      ,from_group = li.data('fromGroup')
      ,user = cache[uid];

      //选择分组
      parent.layui.layim.setFriendGroup({
        type: 'friend'
        ,username: user.username
        ,avatar: user.avatar
        ,group: parent.layui.layim.cache().friend //获取好友分组数据
        ,submit: function(group, index){
          
          //将好友追加到主面板
          parent.layui.layim.addList({
            type: 'friend'
            ,avatar: user.avatar //好友头像
            ,username: user.username //好友昵称
            ,groupid: group //所在的分组id
            ,id: uid //好友ID
            ,sign: user.sign //好友签名
          });
          parent.layer.close(index);
          othis.parent().html('已同意');
        
        
          //实际部署时，请开启下述注释，并改成你的接口地址
          /*
          $.post('/im/agreeFriend', {
            uid: uid //对方用户ID
            ,from_group: from_group //对方设定的好友分组
            ,group: group //我设定的好友分组
          }, function(res){
            if(res.code != 0){
              return layer.msg(res.msg);
            }

            //将好友追加到主面板
            parent.layui.layim.addList({
              type: 'friend'
              ,avatar: user.avatar //好友头像
              ,username: user.username //好友昵称
              ,groupid: group //所在的分组id
              ,id: uid //好友ID
              ,sign: user.sign //好友签名
            });
            parent.layer.close(index);
            othis.parent().html('已同意');
          });
          */
          
        }
      });
    }

    //拒绝
    ,refuse: function(othis){
      var li = othis.parents('li')
      ,uid = li.data('uid');

      layer.confirm('确定拒绝吗？', function(index){
        $.post('/im/refuseFriend', {
          uid: uid //对方用户ID
        }, function(res){
          if(res.code != 0){
            return layer.msg(res.msg);
          }
          layer.close(index);
          othis.parent().html('<em>已拒绝</em>');
        });
      });
    }
  };

  $('body').on('click', '.layui-btn', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
</body>
</html>
